<template>
  <div class="repair">
    <el-card>
      <h2>报修</h2>
      <el-form :model="form" @submit.native.prevent="onSubmit">
        <el-form-item label="充电桩编号">
          <el-input v-model="form.pileID" />
        </el-form-item>
        <el-form-item label="问题描述">
          <el-input v-model="form.repairmiaoshu" type="textarea" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" :loading="loading">提交报修</el-button>
        </el-form-item>
      </el-form>
      <el-alert v-if="msg" :title="msg" type="success" show-icon></el-alert>
    </el-card>
    <el-card style="margin-top: 30px;">
      <h3>报修记录</h3>
      <el-table :data="repairs">
        <el-table-column prop="repairID" label="报修单号" />
        <el-table-column prop="pileID" label="充电桩编号" />
        <el-table-column prop="repairmiaoshu" label="描述" />
        <el-table-column prop="repairprogress" label="进度" />
      </el-table>
    </el-card>
  </div>
</template>

<script>
import api from '@/api';
export default {
  data() {
    return {
      repairs: [],
      form: { pileID: '', repairmiaoshu: '' },
      msg: '',
      loading: false
    };
  },
  async created() {
    this.repairs = await api.get('/repair/list');
  },
  methods: {
    async onSubmit() {
      this.loading = true;
      try {
        await api.post('/repair/add', this.form);
        this.msg = '报修提交成功！';
        this.repairs = await api.get('/repair/list');
      } catch (e) {
        this.msg = '提交失败';
      }
      this.loading = false;
    }
  }
};
</script>

<style scoped>
.repair { max-width: 500px; margin: 40px auto; }
</style>
